<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制</title>

</head>
<body>

<div id="app">


<!--v-if v-show -->
<!--    <template > &lt;!&ndash;template 是一个 逻辑区块&ndash;&gt;-->
        <div v-if="isShow">
            你看见我了
        </div>
<!--        <div>-->
<!--            还有一条-->
<!--        </div>-->
<!--    </template>-->
<!--    <template v-else>-->
<!--         <div>-->
<!--              你本来看不见的！-->
<!--         </div>-->
<!--    </template>-->

    <div>
         <button @click="btnHideClick">隐藏</button>
        <button @click="btnShowClick">显示</button>
        <button @click="btnToggleClick">切换</button>
    </div>



</div>

</body>
<script src="../lib/vue.global.js"></script>
<script src="../mock/cities.js"></script>

<script>
    /**
     *
     * vue 把 数据 和 html 模版 分离了
      *
     *  流程控制
     *     条件渲染  v-if  v-else
     *              v-show
     *
     *              v-if 和 v-show
     *                v-show 不显示的时候  style = "display:none"
     *                v-if   不显示的时候  把元素从dom结构中删除
     *     列表渲染
     * */

    var app=Vue.createApp({
         data:function (){
              return {
                   isShow:true
              }
         },
        methods:{
             btnHideClick:function (){
                 this.isShow = false;
             },
            btnShowClick:function (){
                this.isShow = true;
            },
            btnToggleClick:function (){
                 this.isShow = !this.isShow;
            }
        }
    })

    app.mount('#app');

</script>

</html>